<template>
  <div class="h100">
    <a-tabs @change="callback" class="tabOuterMargin h100">
      <a-tab-pane key="Pending" :tab="$t('pending')">
        <component :is="changeCompt" v-if="changeCompt==='Pending'"></component>
      </a-tab-pane>
      <a-tab-pane key="Done" :tab="$t('processed')">
        <component :is="changeCompt" v-if="changeCompt==='Done'"></component>
      </a-tab-pane>
      <a-tab-pane key="Canceled" :tab="$t('canceled3')">
        <component :is="changeCompt" v-if="changeCompt==='Canceled'"></component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import Pending from './pending.vue'
import Done from './done.vue'
import Canceled from './canceled.vue'
export default {
  components: {
    Pending,
    Done,
    Canceled
  },
  data () {
    return {
      changeCompt: 'Pending'
    }
  },
  methods: {
    // tab页签点击切换加载组件
    callback (key) {
      this.changeCompt = key
    }
  }
}
</script>
<style lang="less" scoped>
.tabOuterMargin {
  padding: 0px 24px;
  /deep/ .ant-tabs-content{
    height: calc(100% - 60px);
  }
}
</style>
